Emmet Abbreviations¶
Emmet — the essential toolkit for web-developers
https://emmet.io - different IDEs we can use Emmet with [Atom, Eclipse, Komodo, Notepad++, NetBeans, etc.]
To trigger abbreviation - hit Tab
1. Actions¶
<!-- TOGGLE COMMENTS -->
<!-- ctrl + / -->
<!-- GOTO MATCHING PAIR -->
<!-- ctrl + alt + j -->
<!-- SELECT THROUGH ITEMS -->
<!-- ctrl + shift + . -->
<!-- ctrl + shift + , -->
<!-- MOVE THINGS -->
<!-- ctrl up or down -->
<!-- MERGE LINES -->
<!-- shift + ctrl + m -->
<!-- INCREMEMNT -->
<!-- .1 - alt + up/down -->
<!-- 1 - shift + ctrl + up/down -->
<!-- 10 - shift + alt + up/down -->
<!-- MATH EXPRESSIONS -->
<!-- ctrl + shift + y -->
<div id="page">
<section class="content1">
<h1>Document example</h1>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section class="content2">
<h1>Document example</h1>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section class="content3">
<h1>Document example</h1>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section class="content4">
<h1>Document example</h1>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</div>
2. Abbreviations¶
<!-- BASIC TAGS, CLASSES & IDS -->
<!-- div -->
div<Tab> -> <div></div>
<!-- h1 -->
h1<Tab> -> <h1></h1>
<!-- Common Shortcuts bq hdr ftr btn -->
bq -> <blockquote></blockquote>
hdr -> <header></header>
ftr -> <footer></footer>
btn -> <button></button>
<!-- ========================================= -->
<!-- classes (by dot) and Ids (by hash or number sign) -->
<!-- ======== -->
<!-- classes (by dot) -->
<!-- h1.myheading -->
h1.myheading -> <h1 class="myheading"></h1>
<!-- div.myclass OR .myclass -->
div.myclass -> <div class="myclass"></div>
.myclass -> <div class="myclass"></div>
<!-- .class1.class2 -->
.class1.class2 -> <div class="class1 class2"></div>
<!-- ======== -->
<!-- Ids -->
<!-- div#myid or #myid -->
div#myid -> <div id="myid"></div>
#myid -> <div id="myid"></div>
<!-- Mix Ids and classes -->
<!-- #myid.myclass -->
#myid.myclass -> <div id="myid" class="myclass"></div>
#myid.class1.class2 -> <div id="myid" class="class1 class2"></div>
<!-- ========================================= -->
<!-- ADDING CONTENT {} -->
<!-- h1{My Title} -->
h1{MyTitle} -> <h1>MyTitle</h1>
<!-- h1.red{My Red Title} -->
h1.red{My Red Title} -> <h1 class="red">My Red Title</h1>
<!-- ========================================= -->
<!-- NESTING > -->
<!-- div>ul>li -->
div>ul>li ->
<div>
<ul>
<li></li>
</ul>
</div>
<!-- div>ul>li{List Item 1} -->
div>ul>li{List Item 1} ->
<div>
<ul>
<li>List Item 1</li>
</ul>
</div>
<!-- ========================================= -->
<!-- MULTIPLICATION * -->
<!-- ul#navigation>li*5>{List Item 1} -->
ul#navigation>li*5>{List Item 1} ->
<ul id="navigation">
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1</li>
</ul>
ul#navigation>li*5>{List Item $} ->
<ul id="navigation">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
<!-- ========================================= -->
<!-- SIBLINGS (same level) + -->
<!-- div+ul+li -->
div+ul+li ->
<div></div>
<ul></ul>
<li></li>
<!-- h1.title+p.body -->
h1.title+p.body ->
<h1 class="title"></h1>
<p class="body"></p>
<!-- div>h1.title+p.body -->
div>h1.title+p.body ->
<div>
<h1 class="title"></h1>
<p class="body"></p>
</div>
<!-- ========================================= -->
<!-- GROUPING () -->
<!-- div>(header>ul>li*2>a)+footer>p -->
div>(header>ul>li*2>a)+footer>p{Copyright 2019} ->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p>Copyright 2019</p>
</footer>
</div>
<!-- ========================================= -->
<!-- ATTRIBUTES -->
<!-- a[href="http://google.com" target="_blank"] -->
a -> <a href=""></a>
a[href="http://google.com" target="_blank" title="Google"] ->
<a href="http://google.com" target="_blank" title="Google"></a>
<!-- ========================================= -->
<!-- FORMS & INPUT -->
<!-- form -->
form -> <form action=""></form>
<!-- form:get -->
form:get -> <form action="" method="get"></form>
<!-- form:post -->
form:post -> <form action="" method="post"></form>
<!-- label -->
label -> <label for=""></label>
<!-- input -->
input -> <input type="">
<!-- inp -->
inp -> <input type="text" name="" id ="">
<!-- input:email -->
input:email -> <input type="email" name="" id ="">
<!-- input:s -->
input:s -> <input type="submit" value="">
<!-- select -->
select -> <select name="" id=""></select>
<!-- ========================================= -->
<!-- EXTENDED STRUCTURE + -->
<!-- select+ -->
select+ ->
<select name="" id="">
<option value=""></option>
</select>
<!-- table+ -->
table+ ->
<table>
<tr>
<td></td>
</tr>
</table>
<!-- ol+ -->
ol+ ->
<ol>
<li></li>
</ol>
<!-- ul+ -->
ul+ ->
<ul>
<li></li>
</ul>
<!-- ========================================= -->
<!-- CUSTOM ALIASES -->
<!-- Edit <>\snippets.json file:
\html\abbreviations\
. . .,
"post": "div#post>h1.title+p.body"
restart Atom
-->
<!-- post -->
<div id="post">
<h1 class="title"></h1>
<p class="body"></p>
</div>
<!-- ========================================= -->
<!-- DOCTYPE AND STRUCTURE -->
<!-- ! -->
! ->
the whole document structure with html, head, meta, title, body for HTML5
<!-- html:5 -->
html:5 ->
the whole document structure with html, head, meta, title, body for HTML5
<!-- html:4t -->
html:4t ->
the whole document structure with html, head, meta, title, body for HTML4
<!-- ========================================= -->
<!-- LOREM IPSUM GENERATOR - dummy text generator -->
<!-- lorem -->
lorem ->
paragraph of simple text
<!-- lorem10 - limit number of words -->
lorem10 ->
lorem500 ->
<!-- ul.mylist>lorem10.item*4 -->
ul.mylist>lorem10.item*4 ->
<ul class="mylist">
<li class="item">Lorem text...</li>
<li class="item">Qweghh text...</li>
<li class="item">Gagagv text...</li>
<li class="item">Vaegre text...</li>
</ul>
3. CSS¶
#myElement{
c:#000 -> color: #000;
c:#0 -> color: #000;
c:#f4 -> color: #f4f4f4;
p:a -> position: absolute;
p:r -> position: relative;
p:f -> position: fixed;
p:s -> position: static;
t:100 -> top: 100px;
top: 50%;
left: 3em;
float: left;
float: left;
float: right;
float: none;
clear: right;
clear: right;
clear: left;
clear: both;
clear: none;
d:b -> display: block;
d:i -> display: inline;
d:ib -> display: inline-block;
m10 -> margin: 10px;
mr10 -> margin-right: 10px;
margin-left: 20px;
mb:10 -> margin-bottom: 10px;
mt:1e -> margin-top: 1em;
p:30-> padding: 30px;
p30 -> padding: 30px;
padding-top: 40px;
padding-left: 12px;
w100 ->width: 100px;
h50p -> height: 50%;
h:auto -> height: auto;
list:n -> list-style-type: none;
list:c -> list-style-type: circle;
list:s -> list-style-type: square;
ta:l -> text-align: left;
text-align: right;
text-align: justify;
td:n -> text-decoration: none;
td:u -> text-decoration: underline;
ff:a -> font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
ff:t -> font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
ff:v -> font-family: Verdana, Geneva, sans-serif;
fw:b -> font-weight: bold;
fw:n ->font-weight: normal;
fw:400 ->font-weight: 400;
fs:i -> font-style: italic;
fs:n ->font-style: normal;
fs:o ->font-style: oblique;
!important
pr10+ml5 ->
padding-right: 10px;
margin-left: 5px;
}
/* ABBRV REF */
#myElement{
/*COLOR*/
c:#000
c:#0
c:#f4
c:rgb
c:rgba
/*POSITION*/
p:s
p:r
p:a
p:f
top: 100
left:50
t:a
/*FLOAT*/
fl
fl:r
fl:n
cl
cl:l
cl:r
cl:n
cl:b
d
d:b
d:i
d:ib
d:li
d:t
/*OVERFLOW*/
ov
ov:h
ov:a
/*MARGIN*/
m:
mt
mr
ml
mb
/*PADDING*/
p
pt
pr
pl
pb
/*SIZING*/
w:100
a:a
h:200
h:a
w:100px
w:50p
w:2e
/*BORDER*/
border: 1
bdr:2
bdl:3
bdt:4
bdb:5
bds:s
bdw:1
bdbc:red
bd+
/*LIST*/
list
list:n
list:d
list:c
list:s
/*TEXT ALIGN*/
ta
ta:l
ta:r
ta:j
/*TEXT DECORATION*/
td
td:n
td:u
td:o
td:l
/*FONTS*/
ff:s
ff:ss
ff:c
ff:f
ff:m
ff:a
ff:t
ff:v
fw
fw:n
fw:b
fw:400
fs
fs:n
fs:i
fs:o
/* IMPORTANT */
!
/*COMBINATIONS*/
p+m10px+fw:b
}
See also:¶
https://docs.emmet.io/cheat-sheet/
https://github.com/emmetio/emmet/tree/master/snippets
Local: [User].atom:nbsphinx-math:packages\emmet\node_modules:nbsphinx-math:emmet\lib\snippets.json